<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="main">
    <div class="layui-btn-group demoTable">
        <button class="layui-btn">新增</button>
    </div>

    <table class="layui-table" lay-data="{height: 'full-200', cellMinWidth: 80, page: true, limit:30, id:'id' ,url:'/api/botany'}" lay-filter="demo">
        <thead>
        <tr>
            <th lay-data="{field:'id', width:80, sort: true, fixed: true}">ID</th>
            <th lay-data="{field:'name', width:250}">名称</th>
            <th lay-data="{field:'gang', width:100}">刚</th>
            <th lay-data="{field:'mu', width:100}">目</th>
            <th lay-data="{field:'ke', width:100}">科</th>
            <th lay-data="{field:'shu', width:80}">属</th>
            <th lay-data="{field:'description', width:300}">描述</th>
            <th lay-data="{fixed: 'right', width:210, align:'center', toolbar: '#barDemo'}"></th>
        </tr>
        </thead>
    </table>

</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="../layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['jquery','table','layer'], function(){
        var table = layui.table
            ,layer=layui.layer
            , $ = layui.$;

        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                            $.ajax({
                                type: "POST",
                                url: "/api/botany/"+data.id,
                                type: "DELETE",
                                data: "id=" + data.id,
                                success: function(r){
                                    if(r.code === 0){
                                        obj.del();
                                    }else{
                                        alert(r.msg);
                                    }
                                }
                            });
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.open({
                    type: 2,
                    title:'编辑',
                    maxmin: true,
                    content: '/edit.html',
                    area: ['100%', '100%'],
                    success: function(layero, index){

                    }
                });
            }
        });

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>

</body>
</html>